<template>
  <div>
    
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      :data="tableDataFn"
      :header-cell-style="{
          background:'#E0E0E0'
        }"
      stripe
      style="width: 100%"
      :fit="true"
    >
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <template v-for="item in tableColumns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :sortable="item.sortable"
          :width="item.width"
          align="center"
          v-if="item.isShow"
          :key="item.prop"
        >
          <template v-slot="scope">
            
            <template>
              <div>
                {{ scope.row[item.prop]||'无数据' }}
              </div>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- <v-pagination
      :dataTotal="postData.dataTotal"
      :curPage="postData.curPage"
      :pageSize="postData.pageSize"
      @getCurPage="getPaginationCurPage"
      @getPageSize="getPaginationPageSize"
    >
    </v-pagination> -->
  </div>
</template>

<script>
import { getMysqlStorageEngine } from "@/api/index.js";
import vPagination from "itemMonitorCom/Pagination.vue";
import tableColumns from "./sqlStorageEngineTableColumns";
import bus from "common/bus.js";
import { GetItem } from "@/utils/dataStore";
export default {
  name: "StatusMonitoring",
  components: {
    vPagination,
   
  },
  data() {
    return {
      postData: {
        opera: "MysqlMessagespace",
        curPage: 1,
        pageSize: 5,
        dataTotal: 0,
      },
      tableData: [],

      tableColumns: tableColumns,
      SearchIPArr: [],
      searchJson: {},
      SearchIP: "",
      timerName: "MonitorInfoMysqlStorageEngine",
      timerEventName: "timerMonitorInfoMysqlStorageEngine",
      timerInterval: 1000 * 60*5,
      loading: true,
      Ioitem: {
        IP: "",
        DATANAME: "",
      },
      selectedMonID: "",
      firstScreen:true
    };
  },
  created() {
    GetItem(sessionStorage.getItem('PushId')).then(_ => {
      this.selectedMonID =_[0].articleAddress;
      this.getTableData();
    })
    this.getToolBarSearchIP(this.selectedMonID.IP);

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });

    bus.$on(this.timerEventName, (msg) => {
      if (msg.isGetData) {
        this.getTableData();
        this.getToolBarSearchIP(this.selectedMonID.IP);
      }
    });
  },
  mounted() {
    bus.$on("ItemMonitorMysql", (msg) => {
      this.resetData();
      this.selectedMonID = msg;

      this.getTableData();
      this.getToolBarSearchIP(this.selectedMonID.IP);
    });
  },
  computed: {
    postDataFn() {
      return {
        postData: JSON.stringify(this.postData),
      };
    },
    // timerInterval() {
    //   return Number(this.$store.state.pageRefresh) * 1000;
    // },
    tableDataFn() {
        if(!this.tableData){
            return []
        }
      return this.tableData
    },
  },
  methods: {
    customColorMethod(row) {
      let _color = "#67c23a";
      switch (row.ALERT_LEVEL) {
        case 3:
          _color = "#f56c6c";
          break;
        case 2:
          _color = "#e6a23c";
          break;

        default:
          break;
      }

      return _color;
    },
    getTableData() {
     if(this.firstScreen){
        this.loading = true;
      }
      if(!this.selectedMonID.DB_SID){
        return
      }
      getMysqlStorageEngine({ip:this.selectedMonID.IP,dbServername:this.selectedMonID.DB_SID}).then((res) => {
        if(res){
          this.tableData = res
        }else{
          // this.$message.error(500)
          this.tableData = [];
        }
        this.loading = false;
      }).finally(_=> {
        this.firstScreen = false
      });;
    },
    getPaginationCurPage(val) {
      this.postData.curPage = val;
      this.getTableData();
    },
    getPaginationPageSize(val) {
      this.postData.curPage = 1;
      this.postData.pageSize = val;

      this.getTableData();
    },
    getToolBarSearchIPArr(arr) {
      this.SearchIPArr = arr;

      this.postData.curPage = 1;
      if (this.SearchIPArr.length > 0) {
        this.postData.filters = {
          ip: this.SearchIPArr,
        };
      } else {
        this.postData.filters = {};
      }

      this.getTableData();
    },
    async getToolBarSearchIP(str) {
      this.SearchIP = str;
      this.postData.curPage = 1;
      await this.$store.commit("MysqlHit/SearchItem", this.SearchIP);
      await this.$store.commit("MysqlHit/pagination", this.postData);
      this.tableData = await this.$store.getters["MysqlHit/getSearchItem"];
      this.postData.dataTotal = this.tableData?this.tableData.length:0;
    },
    getChangeLie(val) {
      this.tableColumns.map((item, index) => {
        item.isShow = val.includes(item.label);
      });
    },
    resetData() {
      this.dataTotal = 0;
      this.tableData = [];
    },
  },
  watch: {},
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
  },
};
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>